<template>
	<view :style="{'height':app.globalData.sysInfo.MAIN_VIEW_HEIGHT+'px'}"
		style="background-color: #ffffff;">
		<view v-if="list.length === 0"
			style="height: 100%;display: flex;justify-content: center;align-items: center;">
			<up-empty mode="data" icon="data"></up-empty>
		</view>
		<scroll-view v-else style="height:100%" @scrolltolower="scrolltolower"
			refresher-enabled="true" :refresher-triggered="trigger"
			@refresherrefresh="refresherrefresh" scroll-y>
			<view @click="itemClick(item)" v-for="(item, index) in list" :key="index"
				style="position: relative;padding: 20rpx;border-bottom: 1px solid #dcdfe6;">
				<view style="font-weight: bold;display: flex;justify-content: space-between;">
					<text>{{item.cusname}}</text>
					<text style="color:orangered">￥{{item.orderamount}}</text>
				</view>
				<view style="margin-top: 10rpx;color:#75747c;font-size: 28rpx;">
					{{item.saleid + " " + item.ownername}}
				</view>
				<view style="margin-top: 10rpx;color:#75747c;font-size: 28rpx;">
					单据时间：{{item.create_time}}
				</view>
				<view style="position: absolute;bottom:20rpx;right:20rpx">
					<up-tag :text="item.statu" plain size="mini" :type="getTagType(item)"></up-tag>
				</view>
			</view>
			<up-loadmore :status="status" />
		</scroll-view>

		<!-- up-list的底部触发更多 -->
		<!-- <up-list v-else @scrolltolower="scrolltolower" height="100%">
			<up-list-item @click="itemClick(item)" v-for="(item, index) in list" :key="index"
				style="position: relative;padding: 20rpx;border-bottom: 1px solid #dcdfe6;">
				<view style="font-weight: bold;display: flex;justify-content: space-between;">
					<text>{{item.cusname}}</text>
					<text style="color:orangered">￥{{item.orderamount}}</text>
				</view>
				<view style="margin-top: 10rpx;color:#75747c;font-size: 28rpx;">
					{{item.saleid + " " + item.owner}}
				</view>
				<view style="margin-top: 10rpx;color:#75747c;font-size: 28rpx;">
					单据时间：{{item.create_time}}
				</view>
				<view style="position: absolute;bottom:20rpx;right:20rpx">
					<up-tag :text="item.statu" plain size="mini" type="success"></up-tag>
				</view>
			</up-list-item>
			<up-loadmore :status="status" />
		</up-list> -->


		<drag-button :isDock="true" :existTabBar="true" text="新增订单" :initPaddingBottom="240"
			@btnClick="btnClick" />
	</view>
</template>

<script setup>
	import { ref, reactive, watch } from 'vue'
	import { onReady, onLoad } from "@dcloudio/uni-app"
	const app = getApp()

	// data
	const limitPage = ref({
		page: 1,
		limit: 10,
	})
	const list = ref([]);
	const trigger = ref(false);
	const status = ref('loadmore');

	onLoad(async () => {
		loadmore();
	})

	// 状态颜色
	const getTagType = (item) => {
		if (item.statu == '待审核') {
			return 'warning'
		} else if (item.statu == '已审核') {
			return 'success'
		}
	}

	const itemClick = (item) => {
		uni.navigateTo({
			url: `/pageCarSale/carSaleOrderDetail?id=${item.saleid}`
		})
	};
	// 悬浮按钮点击返回主页
	const btnClick = () => {
		uni.navigateTo({
			url: '/pageCarSale/carSaleOrder'
		});
	}

	// 滚动加载
	const scrolltolower = () => {
		loadmore();
	};

	// 下拉刷新
	const refresherrefresh = () => {
		trigger.value = true;
		limitPage.value = {
			page: 1,
			limit: 10,
		}
		list.value = []

		setTimeout(() => {
			loadmore()
			trigger.value = false
		}, 500);
	}

	const loadmore = async () => {
		status.value = 'loading';
		// 直接 params = limitPage.value再去修改params会改变ref的limitPage
		const params = { ...limitPage.value }
		const res = await app.globalData.http.get(
			`/sale/list${app.globalData.queryParams(params, true, 'comma')}`)
		setTimeout(() => {
			if (res.data.rows.length != 0) {
				list.value.push(...res.data.rows);
				limitPage.value.page++;
			}
			status.value = 'nomore';
		}, 200);
	};

	const initData = () => {
		list.value = []
		limitPage.value = {
			page: 1,
			limit: 10,
		}
		loadmore()
	}

	// 一定要放在最后，不然会报错
	defineExpose({
		initData
	})
</script>

<style>

</style>